<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body class="fdcolumn">

    <header class="header"></header>
    <main class="fdcolumn jbetwen">

        <div class="distance">
            <!-- 累计跑步距离 -->
            <h3>累计骑行距离：</h3>
            <h1>999.99</h1>
            <h6>公里</h6>
            <hr>
        </div>


        <div class="map fdcolumn flex">

            
            <div id='container' class="fdcolumn">
                <div class="map-body fdcolumn jbetwen">
                    <h1 id="btn">GO</h1>
                    <ul class="position aend fdrow">
                        <li><span class="iconfont icon-ditudingwei"></span></li>
                        <li> <button type="button">设置目标&gt</button> </li>
                        <li><span class="iconfont icon-yinle"></span></li>
                    </ul>
                </div>
            </div>
            

            <div class="route fdcolumn ">
                <h3>骑行路线</h3>
                <p class="fdrow jbetwen">使用骑行路线,邂逅附近的同行者
                    <span class="iconfont icon-qianjin"></span>

                </p>
            </div>
        </div>




    </main>
    <div id="model">
        <div id="time">3</div>
    </div>
    <script src='https://webapi.amap.com/maps?v=2.0&key=9f1a965a64660ef3b630a14f1b3751b4'></script>
    <script type="text/javascript">
        // 地图初始化应该在地图容器div已经添加到DOM树之后
      
    </script>
</body>

</html>